<template>
  <div id="login">
    <el-col id="login1">
      <div class="content">
        <el-col :span="8" :offset="8">
          <div class="rightLogin">
            <div class="main">
              <div class="rightLogin-img"></div>
              <div class="rightLogin-title">预研项目技术风险评价与管理系统</div>
            </div>
            <div class="rightLogin-subTitle">账号密码登录</div>

            <div class="rightLogin-form">
              <el-form ref="form" :model="form" @keyup.enter.native="sureLogin()">
                <el-form-item>
                  <el-input
                    v-model="form.username"
                    prefix-icon="el-icon-user"
                    placeholder="请输入用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input
                    v-model="form.password"
                    prefix-icon="el-icon-lock"
                    placeholder="请输入密码"
                    type="password"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="rightLogin-button">
              <el-button class="rightLogin-button-login" @click="sureLogin()"
                >确定</el-button
              >
            </div>
          </div>
        </el-col>
      </div>
    </el-col>
  </div>
</template>

<script>
import { login } from "api/login";
import { Message } from "element-ui";
export default {
  data() {
    return {
      // 登录表单
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    exit() {
      localStorage.setItem("token", null);
      this.$router.push({
        path: "/login",
      });
    },
    sureLogin() {
      let _data = {
        username: this.form.username,
        password: this.form.password,
      }
      this.$store.dispatch("Login", _data).then((res) => {
        console.log(res, "denglu");
        // debugger;
        if (res.data.code === 200) {
          this.$router.push({
            path: "/user",
          })
          //登录成功之后重定向到首页
          console.log("跳转完毕")
        } else if (res.data.code === 500) {
          this.$message.error('用户名或密码错误')
        } 
      }).catch((err) => {
        // this.loading = false;
        // debugger
        console.log(err, '((((((')
      })
    },
  },
};
</script>

<style lang="less" scoped>
.el-input {
  width: 16.333333rem;
}
.el-button {
  border: #255ba5;
}
#login {
  background: url("../../assets/img/index2.png") no-repeat !important;
  background-size: 100% 100% !important;
  height: 100vh;
  background: #fff;
}
.content {
  // background: #000;
  margin-top: 1.5vh;
  margin-left: 1.5vh;
  margin-right: 1.5vh;
}
.leftImg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 97vh;
}
.leftImg img {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
}
.main {
  display: flex;
}
.rightLogin {
  margin-top: 48%;
  padding-top: 1.333333rem;
  padding-bottom: 1.333333rem;
  flex: 1;
  background-color: rgba(59, 78, 103, 0.5);

  // background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.rightLogin-img {
  flex: 1;
  width: 2.5714rem;
  height: 2.5714rem;
  background: #6dc6ff;
  margin-bottom: 1.5714rem;
  border-radius: 0.7rem;
}
.form-img {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.form-img img {
  width: 70%;
  height: 100%;
}
.rightLogin-title {
  margin-top: 5px;
  margin-left: 10px;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "微软雅黑";
  color: #fff;
  padding-bottom: 1.5714rem;
}
.rightLogin-subTitle {
  color: #fff;
  border-bottom: 3px solid #255ba5;
  padding-bottom: 0.5714rem;
  font-family: "微软雅黑";
  font-weight: 500;
}
.rightLogin-form {
  padding-top: 0.7143rem;
  padding-bottom: 2.4286rem;
}
.rightLogin-button-login {
  background: #2b69a6;
  width: 265px;
  color: #fff;
}
</style>